<template>
  <div class="case">
    <div class="title-color flex j-between">
      巡查维护
    </div>
    <div class="case-cont">
      <div class="text-left">今日接收：{{caseCount.caseSumToday || 0}}件</div>
      <div class="flex j-between data">
        <div>待处理{{caseCount.pendingToday || 0}}件</div>
        <div>已处理{{caseCount.handledToday || 0}}件（其中已结案{{caseCount.closedCaseToday || 0}}件）</div>
      </div>
      <!-- <div style="z-index:1;margin-left:-42px">
          <Echarts width="400px"
                   height="30px"
                   :options="caseTodayOptions"
                   ref="caseTodayEchartsRef"></Echarts>
        </div> -->
      <div class="progress-bar ">
        <div :style="{width:caseCount.handleRatioToday + '%'}"
             v-show="caseCount.handleRatioToday != 0"
             class="handle">
          <span v-show="caseCount.handleRatioToday > 15">已处理</span>
        </div>
        <div class="unhandle">
          <span v-show="caseCount.handleRatioToday">待处理</span>
        </div>
      </div>
    </div>
    <div class="case-cont">
      <div class="text-left">本月接收：{{caseCount.caseSumMonth || 0}}件</div>
      <div class="flex j-between data">
        <div>待处理{{caseCount.pendingMonth || 0}}件</div>
        <div>已处理{{caseCount.handledMonth || 0}}件（其中已结案{{caseCount.closedCaseMonth || 0}}件）</div>
      </div>
      <!-- <div style="z-index:1;margin-left:-42px">
          <Echarts width="400px"
                   height="30px"
                   :options="caseMonthOptions"
                   ref="caseMonthEchartsRef"></Echarts>
        </div> -->
      <div class="progress-bar">
        <div :style="{width:caseCount.handleRatioMonth + '%'}"
             v-show="caseCount.handleRatioMonth != 0"
             class="handle">
          <span v-show="caseCount.handleRatioMonth>15">已处理</span>
        </div>
        <div class="unhandle">
          <span v-show="caseCount.handleRatioMonth<85">待处理</span>
        </div>
      </div>
    </div>
    <div class="noData"
         v-if="caseBroadcast.length == 0">
      <img src="../../../assets/screen/no_data.png">
      暂无数据
    </div>
    <div class="rotation"
         ref="rotationRef"
         v-else>
      <vue-seamless-scroll :data="caseBroadcast"
                           :class-option="caseOption">
        <div class="item flex j-between"
             v-for="(item,index) in caseBroadcast"
             :key="index">
          <div class="line2">{{item.address + item.caseIssueChildName + item.des + item.status}}</div>
          <div>{{formatTime(item.createTime)}}</div>
        </div>
      </vue-seamless-scroll>
    </div>
  </div>
</template>

<script>
import Echarts from '@/components/common/Echarts';
import vueSeamlessScroll from 'vue-seamless-scroll'
import { pollingTime } from './largeScreenConfig'
export default {
  components: { Echarts, vueSeamlessScroll },
  data () {
    return {
      caseCount: {},
      caseBroadcast: [],
      bg: 'image://',
      bar: 'image://',
      caseTodayOptions: {
        grid: {
          // top: '10%',
          // left: '20%',
          // right: '10%',
          // bottom: '0%',
        },
        // title: {
        //   text: '斜边柱子',
        // },
        xAxis: {
          show: false,
        },
        yAxis: {
          data: [],
          splitLine: {
            show: false,
          },
          axisLabel: {
            textStyle: { fontSize: '80%', color: '#02afff' },
          },
          axisLine: {
            show: false,
          },
          axisTick: false,
        },
        series: [
          {
            type: 'pictorialBar',
            barWidth: 20,
            zlevel: 2,
            data: [{
              value: '',
              symbol: this.bar,
            }],
          },
          {
            type: 'pictorialBar',
            barWidth: 20,
            data: [{
              realValue: '',
              value: '',
              symbol: this.bg,
            }],
            label: {
              show: true,
              position: 'right',
              distance: 100,
              align: "right",
              // formatter: function (params) {
              //   return '已处理/待处理';
              // },
              color: '#02afff',
              fontSize: 18,
            },
          },
        ],
      },
      caseMonthOptions: {
        grid: {
          // top: '10%',
          // left: '20%',
          // right: '10%',
          // bottom: '0%',
        },
        // title: {
        //   text: '斜边柱子',
        // },
        xAxis: {
          show: false,
        },
        yAxis: {
          data: [],
          splitLine: {
            show: false,
          },
          axisLabel: {
            textStyle: { fontSize: '80%', color: '#02afff' },
          },
          axisLine: {
            show: false,
          },
          axisTick: false,
        },
        series: [
          {
            type: 'pictorialBar',
            barWidth: 20,
            zlevel: 2,
            data: [{
              value: '',
              symbol: this.bar,
            }],
          },
          {
            type: 'pictorialBar',
            barWidth: 20,
            data: [{
              realValue: '',
              value: '',
              symbol: this.bg,
            }],
            label: {
              show: true,
              position: 'right',
              distance: 100,
              align: "right",
              // formatter: function (params) {
              //   return '已处理/待处理';
              // },
              color: '#02afff',
              fontSize: 18,
            },
          },
        ],
      },
      caseOption: {
        limitMoveNum: 5,
        singleHeight: 38,
        waitTime: 1000
      },
    };
  },
  computed: {
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.getCaseCount()
      this.getCaseBroadcast()
      setInterval(() => {
        this.getCaseCount()
        this.getCaseBroadcast()
      }, pollingTime);
      // this.getAnmation()
    },
    getAnmation () {
      let arr = this.$refs.personLineAnimationRef
      let i = 0
      setInterval(() => {
        if (arr[i]) {
          arr[i].style.opacity = 1
        }
        if (arr[i - 1]) {
          arr[i - 1].style.opacity = 1
        }
        if (arr[i - 2]) {
          arr[i - 2].style.opacity = 1
        }
        if (arr[i - 3]) {
          arr[i - 3].style.opacity = 1
        }
        if (arr[i - 4]) {
          arr[i - 4].style.opacity = 1
        }
        if (arr[i - 5]) {
          arr[i - 5].style.opacity = 1
        }
        arr.forEach((item, index) => {
          if (index != i && index != i - 1 && index != i - 2 && index != i - 3 && index != i - 4 && index != i - 5) {
            arr[index].style.opacity = .5
          }
        })
        if (i == arr.length + 1) {
          i = 0
        } else {
          i++
        }
      }, 50);
    },
    // 案件数量
    getCaseCount () {
      this.$http.getScreenCaseCount().then((res) => {
        if (res.code === 200) {
          this.caseCount = res.result
          this.caseCount.handleRatioToday = parseInt(this.caseCount.handledToday) / (parseInt(this.caseCount.pendingToday) + parseInt(this.caseCount.handledToday)) * 100
          this.caseCount.handleRatioMonth = parseInt(this.caseCount.handledMonth) / (parseInt(this.caseCount.pendingMonth) + parseInt(this.caseCount.handledMonth)) * 100
          this.caseCount.handleRatioToday = 0 < this.caseCount.handleRatioToday && this.caseCount.handleRatioToday < 5 ? 5 : this.caseCount.handleRatioToday
          this.caseCount.handleRatioMonth = 0 < this.caseCount.handleRatioMonth && this.caseCount.handleRatioMonth < 5 ? 5 : this.caseCount.handleRatioMonth
          this.caseTodayOptions.series[0].data[0].value = this.caseCount.handledToday
          this.caseTodayOptions.series[0].data[0].symbol = this.bar
          this.caseTodayOptions.series[1].data[0].realValue = this.caseCount.pendingToday
          this.caseTodayOptions.series[1].data[0].value = this.caseCount.caseSumToday
          this.caseTodayOptions.series[1].data[0].symbol = this.bg
          // this.$refs.caseTodayEchartsRef.init()
          this.caseMonthOptions.series[0].data[0].value = this.caseCount.handledMonth
          this.caseMonthOptions.series[0].data[0].symbol = this.bar
          this.caseMonthOptions.series[1].data[0].realValue = this.caseCount.pendingMonth
          this.caseMonthOptions.series[1].data[0].value = this.caseCount.caseSumMonth
          this.caseMonthOptions.series[1].data[0].symbol = this.bg
          // this.$refs.caseMonthEchartsRef.init()
        }
      })
    },
    // 案件播报
    getCaseBroadcast () {
      this.$http.getScreenCaseBroadcast({}).then((res) => {
        if (res.code == 200) {
          this.caseBroadcast = res.result.map(item => {
            switch (item.status) {
              case 1:
                item.status = '待分派'
                break;
              case 2:
                item.status = '待处理'
                break;
              case 3:
                item.status = '待结案'
                break;
              case 4:
                item.status = '已结案'
                break;
              case 5:
                item.status = '已废弃'
                break;
              default:
                break;
            }
            return item
          })
          // this.caseBroadcast = [{ "caseId": "51314fd4de094bcab8a0577221ac3cf4", "caseNo": "1636687614611-126880", "caseIssueId": "1", "caseIssueName": "环境卫生", "caseIssueChildId": "11", "caseIssueChildName": "暴露垃圾", "address": "胜利东街4778号", "lng": "119.13759", "lat": "36.70497", "personId": "", "personName": "", "isPlatformAssign": 1, "caseLevelId": "1", "caseLevelName": null, "timelimit": 90, "ccUid": "", "ccName": null, "isSendSms": 0, "des": "", "imgUrl": "", "imgUrlOk": null, "voiceUrl": null, "voiceUrlOk": null, "videoUrl": null, "videoUrlOk": null, "createUid": "18ed4f511eb768dc8895331eb8a22a68", "createName": "test", "createTime": "2021-11-12 11:26:54", "createDate": null, "createMonth": null, "updateTime": "2021-11-12 11:26:54", "updateUid": null, "sheshiTypeId": "", "sheshiId": "", "sheshiName": "", "status": 1, "beforeFqStatus": null, "depid": null, "depIds": null, "depName": null, "isArchive": 0, "isPostpone": 0, "isOverdue": 0, "overdueTime": null, "consumingTime": null, "isUrge": 0, "sign": 0, "appointTime": null, "appointName": null, "casesetIssueSourceId": "3c49e738aa9624236b635a0d3b1f4344", "startDate": null, "endDate": null, "orgType": null, "isRead": null, "myFlag": null, "pageNum": null, "pageSize": null, "dateType": null, "personIds": null, "createUids": null }, { "caseId": "51314fd4de094bcab8a0577221ac3cf4", "caseNo": "1636687614611-126880", "caseIssueId": "1", "caseIssueName": "环境卫生", "caseIssueChildId": "11", "caseIssueChildName": "暴露垃圾", "address": "胜利东街4778号", "lng": "119.13759", "lat": "36.70497", "personId": "", "personName": "", "isPlatformAssign": 1, "caseLevelId": "1", "caseLevelName": null, "timelimit": 90, "ccUid": "", "ccName": null, "isSendSms": 0, "des": "", "imgUrl": "", "imgUrlOk": null, "voiceUrl": null, "voiceUrlOk": null, "videoUrl": null, "videoUrlOk": null, "createUid": "18ed4f511eb768dc8895331eb8a22a68", "createName": "test", "createTime": "2021-11-12 11:26:54", "createDate": null, "createMonth": null, "updateTime": "2021-11-12 11:26:54", "updateUid": null, "sheshiTypeId": "", "sheshiId": "", "sheshiName": "", "status": 1, "beforeFqStatus": null, "depid": null, "depIds": null, "depName": null, "isArchive": 0, "isPostpone": 0, "isOverdue": 0, "overdueTime": null, "consumingTime": null, "isUrge": 0, "sign": 0, "appointTime": null, "appointName": null, "casesetIssueSourceId": "3c49e738aa9624236b635a0d3b1f4344", "startDate": null, "endDate": null, "orgType": null, "isRead": null, "myFlag": null, "pageNum": null, "pageSize": null, "dateType": null, "personIds": null, "createUids": null }, { "caseId": "51314fd4de094bcab8a0577221ac3cf4", "caseNo": "1636687614611-126880", "caseIssueId": "1", "caseIssueName": "环境卫生", "caseIssueChildId": "11", "caseIssueChildName": "暴露垃圾", "address": "胜利东街4778号", "lng": "119.13759", "lat": "36.70497", "personId": "", "personName": "", "isPlatformAssign": 1, "caseLevelId": "1", "caseLevelName": null, "timelimit": 90, "ccUid": "", "ccName": null, "isSendSms": 0, "des": "", "imgUrl": "", "imgUrlOk": null, "voiceUrl": null, "voiceUrlOk": null, "videoUrl": null, "videoUrlOk": null, "createUid": "18ed4f511eb768dc8895331eb8a22a68", "createName": "test", "createTime": "2021-11-12 11:26:54", "createDate": null, "createMonth": null, "updateTime": "2021-11-12 11:26:54", "updateUid": null, "sheshiTypeId": "", "sheshiId": "", "sheshiName": "", "status": 1, "beforeFqStatus": null, "depid": null, "depIds": null, "depName": null, "isArchive": 0, "isPostpone": 0, "isOverdue": 0, "overdueTime": null, "consumingTime": null, "isUrge": 0, "sign": 0, "appointTime": null, "appointName": null, "casesetIssueSourceId": "3c49e738aa9624236b635a0d3b1f4344", "startDate": null, "endDate": null, "orgType": null, "isRead": null, "myFlag": null, "pageNum": null, "pageSize": null, "dateType": null, "personIds": null, "createUids": null }, { "caseId": "51314fd4de094bcab8a0577221ac3cf4", "caseNo": "1636687614611-126880", "caseIssueId": "1", "caseIssueName": "环境卫生", "caseIssueChildId": "11", "caseIssueChildName": "暴露垃圾", "address": "胜利东街4778号", "lng": "119.13759", "lat": "36.70497", "personId": "", "personName": "", "isPlatformAssign": 1, "caseLevelId": "1", "caseLevelName": null, "timelimit": 90, "ccUid": "", "ccName": null, "isSendSms": 0, "des": "", "imgUrl": "", "imgUrlOk": null, "voiceUrl": null, "voiceUrlOk": null, "videoUrl": null, "videoUrlOk": null, "createUid": "18ed4f511eb768dc8895331eb8a22a68", "createName": "test", "createTime": "2021-11-12 11:26:54", "createDate": null, "createMonth": null, "updateTime": "2021-11-12 11:26:54", "updateUid": null, "sheshiTypeId": "", "sheshiId": "", "sheshiName": "", "status": 1, "beforeFqStatus": null, "depid": null, "depIds": null, "depName": null, "isArchive": 0, "isPostpone": 0, "isOverdue": 0, "overdueTime": null, "consumingTime": null, "isUrge": 0, "sign": 0, "appointTime": null, "appointName": null, "casesetIssueSourceId": "3c49e738aa9624236b635a0d3b1f4344", "startDate": null, "endDate": null, "orgType": null, "isRead": null, "myFlag": null, "pageNum": null, "pageSize": null, "dateType": null, "personIds": null, "createUids": null }, { "caseId": "51314fd4de094bcab8a0577221ac3cf4", "caseNo": "1636687614611-126880", "caseIssueId": "1", "caseIssueName": "环境卫生", "caseIssueChildId": "11", "caseIssueChildName": "暴露垃圾", "address": "胜利东街4778号", "lng": "119.13759", "lat": "36.70497", "personId": "", "personName": "", "isPlatformAssign": 1, "caseLevelId": "1", "caseLevelName": null, "timelimit": 90, "ccUid": "", "ccName": null, "isSendSms": 0, "des": "", "imgUrl": "", "imgUrlOk": null, "voiceUrl": null, "voiceUrlOk": null, "videoUrl": null, "videoUrlOk": null, "createUid": "18ed4f511eb768dc8895331eb8a22a68", "createName": "test", "createTime": "2021-11-12 11:26:54", "createDate": null, "createMonth": null, "updateTime": "2021-11-12 11:26:54", "updateUid": null, "sheshiTypeId": "", "sheshiId": "", "sheshiName": "", "status": 1, "beforeFqStatus": null, "depid": null, "depIds": null, "depName": null, "isArchive": 0, "isPostpone": 0, "isOverdue": 0, "overdueTime": null, "consumingTime": null, "isUrge": 0, "sign": 0, "appointTime": null, "appointName": null, "casesetIssueSourceId": "3c49e738aa9624236b635a0d3b1f4344", "startDate": null, "endDate": null, "orgType": null, "isRead": null, "myFlag": null, "pageNum": null, "pageSize": null, "dateType": null, "personIds": null, "createUids": null }, { "caseId": "51314fd4de094bcab8a0577221ac3cf4", "caseNo": "1636687614611-126880", "caseIssueId": "1", "caseIssueName": "环境卫生", "caseIssueChildId": "11", "caseIssueChildName": "暴露垃圾", "address": "胜利东街4778号", "lng": "119.13759", "lat": "36.70497", "personId": "", "personName": "", "isPlatformAssign": 1, "caseLevelId": "1", "caseLevelName": null, "timelimit": 90, "ccUid": "", "ccName": null, "isSendSms": 0, "des": "", "imgUrl": "", "imgUrlOk": null, "voiceUrl": null, "voiceUrlOk": null, "videoUrl": null, "videoUrlOk": null, "createUid": "18ed4f511eb768dc8895331eb8a22a68", "createName": "test", "createTime": "2021-11-12 11:26:54", "createDate": null, "createMonth": null, "updateTime": "2021-11-12 11:26:54", "updateUid": null, "sheshiTypeId": "", "sheshiId": "", "sheshiName": "", "status": 1, "beforeFqStatus": null, "depid": null, "depIds": null, "depName": null, "isArchive": 0, "isPostpone": 0, "isOverdue": 0, "overdueTime": null, "consumingTime": null, "isUrge": 0, "sign": 0, "appointTime": null, "appointName": null, "casesetIssueSourceId": "3c49e738aa9624236b635a0d3b1f4344", "startDate": null, "endDate": null, "orgType": null, "isRead": null, "myFlag": null, "pageNum": null, "pageSize": null, "dateType": null, "personIds": null, "createUids": null }, { "caseId": "51314fd4de094bcab8a0577221ac3cf4", "caseNo": "1636687614611-126880", "caseIssueId": "1", "caseIssueName": "环境卫生", "caseIssueChildId": "11", "caseIssueChildName": "暴露垃圾", "address": "胜利东街4778号", "lng": "119.13759", "lat": "36.70497", "personId": "", "personName": "", "isPlatformAssign": 1, "caseLevelId": "1", "caseLevelName": null, "timelimit": 90, "ccUid": "", "ccName": null, "isSendSms": 0, "des": "", "imgUrl": "", "imgUrlOk": null, "voiceUrl": null, "voiceUrlOk": null, "videoUrl": null, "videoUrlOk": null, "createUid": "18ed4f511eb768dc8895331eb8a22a68", "createName": "test", "createTime": "2021-11-12 11:26:54", "createDate": null, "createMonth": null, "updateTime": "2021-11-12 11:26:54", "updateUid": null, "sheshiTypeId": "", "sheshiId": "", "sheshiName": "", "status": 1, "beforeFqStatus": null, "depid": null, "depIds": null, "depName": null, "isArchive": 0, "isPostpone": 0, "isOverdue": 0, "overdueTime": null, "consumingTime": null, "isUrge": 0, "sign": 0, "appointTime": null, "appointName": null, "casesetIssueSourceId": "3c49e738aa9624236b635a0d3b1f4344", "startDate": null, "endDate": null, "orgType": null, "isRead": null, "myFlag": null, "pageNum": null, "pageSize": null, "dateType": null, "personIds": null, "createUids": null }, { "caseId": "51314fd4de094bcab8a0577221ac3cf4", "caseNo": "1636687614611-126880", "caseIssueId": "1", "caseIssueName": "环境卫生", "caseIssueChildId": "11", "caseIssueChildName": "暴露垃圾", "address": "胜利东街4778号", "lng": "119.13759", "lat": "36.70497", "personId": "", "personName": "", "isPlatformAssign": 1, "caseLevelId": "1", "caseLevelName": null, "timelimit": 90, "ccUid": "", "ccName": null, "isSendSms": 0, "des": "", "imgUrl": "", "imgUrlOk": null, "voiceUrl": null, "voiceUrlOk": null, "videoUrl": null, "videoUrlOk": null, "createUid": "18ed4f511eb768dc8895331eb8a22a68", "createName": "test", "createTime": "2021-11-12 11:26:54", "createDate": null, "createMonth": null, "updateTime": "2021-11-12 11:26:54", "updateUid": null, "sheshiTypeId": "", "sheshiId": "", "sheshiName": "", "status": 1, "beforeFqStatus": null, "depid": null, "depIds": null, "depName": null, "isArchive": 0, "isPostpone": 0, "isOverdue": 0, "overdueTime": null, "consumingTime": null, "isUrge": 0, "sign": 0, "appointTime": null, "appointName": null, "casesetIssueSourceId": "3c49e738aa9624236b635a0d3b1f4344", "startDate": null, "endDate": null, "orgType": null, "isRead": null, "myFlag": null, "pageNum": null, "pageSize": null, "dateType": null, "personIds": null, "createUids": null }]
          if (this.caseBroadcast.length) {
            this.$nextTick(() => {
              let height = this.$refs.rotationRef.offsetHeight / 4
              this.caseOption.singleHeight = parseInt(height)
            })
          }
        }
      })
    },
    // 作业概况时间 去掉年月日
    formatTime (time) {
      if (time) {
        let arr = time.split(' ')
        let newArr = arr[1].split(':')
        return newArr[0] + ':' + newArr[1]
      } else {
        return ''
      }
    },
  },
}
</script>

<style lang='scss' scoped>
.case {
  position: relative;
  background: url("../../../assets/screen/case_bg.png") no-repeat;
  background-size: 100% 100%;
  padding: 0.1736vw 0.3472vw 0 1.4757vw;
  padding-left: 4.3403vw;
  position: relative;
  .title-color {
    padding-top: 0.6944vw;
    padding-left: 1.3889vw;
    font-size: 0.6597vw;
  }
  .case-cont {
    font-size: 0.5903vw;
    margin-top: 0.5vw;
    .data {
      margin-top: 0.5208vw;
    }
  }
  .progress-bar {
    position: relative;
    height: 0.7292vw;
    line-height: 0.7292vw;
    margin: 0.0868vw 0;
    margin-top: 0.434vw;
    font-size: 0.434vw;
    .handle {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      height: 0.7292vw;
      line-height: 0.7292vw;
      text-align: left;
      background: #307fe0;
      border-radius: 0.5208vw;
      span {
        margin-left: 0.5208vw;
      }
    }
    .unhandle {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 0.7292vw;
      line-height: 0.7292vw;
      text-align: right;
      background: #666666;
      border-radius: 0.5208vw;
      span {
        margin-right: 0.5208vw;
      }
    }
  }
  .noData {
    img {
      width: 4.3403vw;
      height: 4.3403vw;
      margin-bottom: 0.1736vw;
    }
  }
  .rotation {
    height: 8vw;
    border: 0.0174vw solid #00cbff;
    padding: 0 0.3472vw;
    overflow: hidden;
    font-size: 0.5903vw;
    margin-top: 0.5208vw;
    .item {
      height: 1.7vw;
      padding-left: 0;
      margin-bottom: 0.3vw;
      div:first-child {
        width: 10.4167vw;
      }
      div:last-child {
        min-width: 0.7813vw;
      }
    }
  }
  .animation-line {
    height: 5.5903vw;
    position: absolute;
    top: 0;
    right: -0.2604vw;
    div {
      width: 0.1736vw;
      height: 0.1736vw;
      margin-bottom: 0.1736vw;
      background: #b7cffc;
      opacity: 0.5;
    }
  }
}
</style>  